<template>
	<view>
		<!-- 导航栏 -->
		<nav-tab @toggle="navToggleMeth"></nav-tab>
<!-- 		<view class="navTabBox">
			<view class="acea-row row-middle row-between category-box">
				<view class="acea-row row-middle row-between longTab">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
						:scroll-left="tabRight" show-scrollbar="true">
						<view class="longItem"	:class="index===categoryOn?'click':''" v-for="(item,index) in categorys" :key="index"
								:id="'id'+index" @click="longClick(index)">{{item}}</view>
					</scroll-view>
				</view>
			</view>
			<view class="sort-box">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<view v-for="(item,index) in filtrates" :key="index"
						:class="['sort',filtrateOn==index?'sort-on':'']" @click="filtrateOn=index">{{item.name}}</view>

				</scroll-view>
			</view>
		</view> -->
		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="acea-row row-middle row-between title-box">
					<view class="item-l title line2">{{categorys[item.type]}} 丨{{item.generalization}}</view>
					<view class="item-r btn-box">
						<view :class="Number(item.status) == 1?'btn-gray':'btn-red'">{{item.status==1?'已完成':'任务进行中'}}</view>
						<view class="text">资金{{item.trusteeship== 0?'未':'已'}}托管</view>
					</view>
				</view>
				<view class="item-l">
					<view class="gray-text">您已分享人数{{item.toShare?item.toShare:0}}人，赚取价值{{item.toEarnGold?item.toEarnGold:0}}(金币)</view>
					<view class="gray-text">绑定下级成员{{item.toShare?item.toShare:0}}人</view>
				</view>
				<view class="detail-text" @click="toDetail(item)">任务详情</view>
				<!-- <view class="share-text" v-if="item.status != 1">继续分享</view> -->
			</view>
			
	<!-- 		<view class="item">
				<view class="acea-row row-middle row-between title-box">
					<view class="item-l title line2">出租 丨汽车西站-五一广场-地下商业街丨2000㎡ 丨 20000元/㎡/月</view>
					<view class="item-r btn-box">
						<view class="btn-red">领任务</view>
						<view class="text">(已领122人)</view>
					</view>
				</view>
				<view class="item-l">
					<view class="gray-text">分享赚1: <text class="red-text">金1000元</text>（已托管平台）</view>
					<view class="gray-text">分享赚2: <text class="red-text">价值1888元(金币)</text>,剩余184(金币)</view>
				</view>
				<view class="detail-text">任务详情</view>
			</view> -->
			
<!-- 			<view class="item">
				<view class="acea-row row-middle row-between title-box">
					<view class="item-l title line2">出租 丨汽车西站-五一广场-地下商业街丨2000㎡ 丨 20000元/㎡/月</view>
					<view class="item-r btn-box">
						<view class="btn-gray">已领</view>
						<view class="text">(已领122人)</view>
					</view>
				</view>
				<view class="item-l">
					<view class="gray-text">分享赚1: <text class="red-text">金1000元</text>（已托管平台）</view>
					<view class="gray-text">分享赚2: <text class="red-text">价值1888元(金币)</text>,剩余184(金币)</view>
				</view>
				<view class="detail-text"  @click="toPage('/pages/details/offeraRreward/offeraRreward')">任务详情</view>
			</view> -->
			
		</view>
		
		<view class='loadingicon acea-row row-center row-middle'>
			<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
		</view>
	</view>
</template>

<script>
	import {
		RewardOnApi
	} from '@/api/reward.js'
	import {
		toPage
	} from '@/filters/commFilter.js'
	import navTab from './navTab.vue'
	export default {
		components:{
			navTab
		},
		data() {
			return {
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				tabRight:0,
				categorys: ['租转','出售','求租','求购', '招工', '服务','二手','供应', '求职'],
				categoryOn: 0,
				// ,{type:'0',name:'时间'},{type:'0',name:'排序'}
				filtrates: [{
					type: '',
					name: '全部'
				}, {
					type: '1',
					name: '进行中'
				}, {
					type: '2',
					name: '已完成'
				}],
				filtrateOn: 0,
				page: 1,
				totalPage: 1,
				list:[],
				lqStatus:{
					0: '未领取',
					1:'任务进行中',
					2:'已完成'
				},
				loading:true,
				loadTitle:'',
				searchType:{}
			};
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 4
				}
			})
			this.getList()
		},
		// watch:{
		// 	filtrateOn(){
		// 		this.page = 1;
		// 		this.getList()
		// 	}
		// },
		methods: {
			toPage,
			navToggleMeth(item){
				console.log("test")
				this.page = 1;
				this.searchType = item;
				this.getList();
			},
			longClick(index) {
				if (this.categorys.length >= 4) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index;
				this.isLeft = index * this.isWidth //设置下划线位置
				if(this.filtrateOn == 0){
					this.page = 1;
					this.getList()
				}else{
					this.filtrateOn = 0;
				}
			},
			toDetail(item){
				if(item.status == 1){
					this.$util.Tips({
						title:"悬赏已完成"
					})
					return;
				};
				item.rewardStatus = 1;
				this.toPage('/pages/details/offeraRreward/offeraRreward?taskId='+ item.reward+'&fbInfo='+JSON.stringify(item))
			},
			async getList(){
				this.loading = false;
				if(this.page == 1){
					this.list = []
				}
				try{
					// let ty = this.categoryOn == 0 ||  this.categoryOn == 1? 0: this.categoryOn+1;
					// let statuss =  this.categoryOn == 0?'0,2':(this.categoryOn == 1? '1':'');
					let { data } = await RewardOnApi({ page: this.page, limit: 20 , type: this.searchType.type});
					// this.list = data.list
					if(this.page == 1){
						this.loading= true
						this.list = data.list;
						if(this.list.length<=0){
							this.loadTitle= '暂无数据'
						}else{
							this.loadTitle= ""
						}
					}else{
						this.list=this.list.concat(data.list);
						if(data.list.length<=0){
							this.loadTitle= '已加载所有'
						}
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		},
		onReachBottom() {
			this.page++;
			this.getList();
		}
		
	}
</script>

<style lang="scss">
	.navTabBox {
		background: #ffffff;
		padding: 24rpx 24rpx;

		.category-box {
			color: rgba(50, 50, 51, 1);
			font-size: 32rpx;
			font-weight: 500;

			.click {
				color: rgba(238, 33, 45, 1);
				border-bottom: 2px solid  rgba(238, 33, 45, 1);
			}

			.longTab {
				width: calc(100%);
				/* #ifdef H5 */
				padding-bottom: 20rpx;
				/* #endif */
				/* #ifdef MP */
				padding-top: 12rpx;
				padding-bottom: 12rpx;

				/* #endif */
				.longItem {
					height: 50upx;
					display: inline-block;
					line-height: 50upx;
					text-align: center;
					font-size: 32rpx;
					margin: 0 20rpx;
					&.click {
						font-weight: bold;
					}
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: .5s;

					.underline {
						width: 33rpx;
						height: 4rpx;
						background-color: rgba(238, 33, 45, 1);
					}
				}
			}
		}

		.filtration {
			margin-left: 18rpx;
			padding: 12rpx 0 16rpx;

			.text {
				width: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.sanjiao {
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top-color: rgba(128, 128, 128, 1);
				border-bottom-width: 0;
			}
		}
	}

	.sort-box {
		width: 100%;
		padding: 12rpx 0 0;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 33rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}
	.sort-jiantou-b {
		display: inline-block;
		white-space: nowrap;
		border-radius: 10rpx;
		background: rgba(247, 247, 247, 1);
		padding: 12rpx 33rpx 12rpx 0;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(50, 50, 51, 1);
		margin-right: 18rpx;
		position: relative;
		&::after{
			display: block;
			content: '';
			position: absolute;
			right: 12rpx;
			top: 50%;
			margin-top: -4rpx;
			width: 8rpx;
			height: 8rpx;
			border-top: 1px solid rgba(50, 50, 51, 1);
			border-right: 1px solid rgba(50, 50, 51, 1);
			transform: rotate(135deg);
		}
	}
	// 列表
	.list{
		padding: 30rpx 24rpx;
		.item{
			background: #ffffff;
			border-radius: 10rpx;
			padding:24rpx;
			position: relative;
			margin-bottom: 28rpx;
			.detail-text{
				position: absolute;
				bottom: 24rpx;
				right: 24rpx;
				text-align: right;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding-right: 20rpx;
				&::after{
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-top: 1px solid rgba(238, 33, 45, 1);
					border-right: 1px solid rgba(238, 33, 45, 1);
					transform: rotate(45deg);
					right: 24rpx;
					top: 50%;
					margin-top: -5rpx;
					right: 0;
				}
			}
			.share-text{
				position: absolute;
				bottom: 66rpx;
				right: 24rpx;
				text-align: right;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(14, 81, 158, 1);
				padding-right: 20rpx;
				&::after{
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-top: 1px solid rgba(14, 81, 158, 1);
					border-right: 1px solid rgba(14, 81, 158, 1);
					transform: rotate(45deg);
					right: 24rpx;
					top: 50%;
					margin-top: -5rpx;
					right: 0;
				}
			}
			.item-l{
				width: 68%;
			}
			.item-r{
				width: 28%;
			}
			.title{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(56, 56, 56, 1);
			}
			.btn-box{
				.btn-red{
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 50rpx;
					background: rgba(238, 33, 45, 1);					
					border: 1px solid rgba(235, 36, 61, 1);  
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					padding: 0 24rpx;
				}
				.btn-gray{
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 50rpx;
					background: rgba(233, 231, 231, 1);					
					border: 1px solid rgba(233, 231, 231, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					padding: 0 24rpx;
				}
				.text{
					font-size: 24rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: rgba(128, 128, 128, 1);
					text-align: center;
				}
			}
			.gray-text{
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(166, 166, 166, 1);
			}
			.red-text{
				font-size: 24rpx;
				font-weight: 500;
				line-height: 42rpx;
				color: rgba(212, 48, 48, 1);
			}
		}
	}
</style>
